<template>
  <div class="login">
    <el-container class="login-box">
      <el-header class="login-header" height="auto"></el-header>
      <el-main class="login-content" height="auto">
        <div class="login-div">
          <el-row style="text: center">
            <el-col :span="24">
              <h4 style="padding-top: 20px; padding-bottom: 20px">
                {{ appTitle }}
              </h4>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form label-width="55px" :model="loginData">
                <el-form-item label="账号">
                  <el-input
                    placeholder="请输入账号"
                    v-model="loginData.name"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input
                    placeholder="请输入密码"
                    v-model="loginData.pwd"
                    show-password
                    @keyup.enter="loginFunc"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="1" :span="22">
              <el-button type="primary" class="sub-btn" @click="loginFunc">
                登 录
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { reactive, readonly } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";

import utils from "@/common/utils";

export default {
  name: "Login",
  // components: { Footer },
  setup() {
    // window.addEventListener("keydown", (e) => {
    //   if (e.key === "Enter") loginFunc();
    // });
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const appTitle = readonly("登录");
    store.dispatch("system/logout");
    const loginData = reactive({ name: "", pwd: "" });
    const loginFunc = () => {
      if (utils.isEmpty(loginData.name)) {
        ElMessage.error("请输入账号");
        return;
      }
      if (utils.isEmpty(loginData.pwd)) {
        ElMessage.error("请输入密码");
        return;
      }
      const loading = ElLoading.service({
        lock: true,
        background: "rgba(0, 0, 0, 0.5)",
      });
      store
        .dispatch("system/login", {
          username: loginData.name,
          password: loginData.pwd,
        })
        .then(() => {
          store
            .dispatch("permission/getMenuList")
            .then((res) => {
              store.commit('updatename',loginData.name);
              sessionStorage.setItem('name',loginData.name);
              router.push({ path: route.query.redirect || "/Home" });
            })
            .catch((err) => {
              store.dispatch("system/resetState");
              store.dispatch("permission/resetState");
              ElMessage.error(err.message || "请求出错");
            })
            .finally(() => loading.close());
        })
        .catch((err) => {
          loading.close();
          ElMessage.error(err.message || "请求出错");
        });
    };
    const logoutFunc = () => {
      const loading = ElLoading.service({
        lock: true,
        background: "rgba(0, 0, 0, 0.5)",
      });
      store
        .dispatch("system/logout")
        .then(() => router.push({ path: "/login" }))
        .catch((err) => ElMessage.error(err.message || "请求出错"))
        .finally(() => loading.close());
    };
    return { appTitle, loginData, loginFunc, logoutFunc };
  },
};
</script>

<style lang="scss">
.login {
  height: 100%;
  background: transparent;
  .login-box {
    height: 100%;
    background: transparent;
    .login-header,
    .login-footer {
      height: calc(calc(100vh - 220px) / 2);
    }
    .login-content {
      height: 220px;
      overflow: hidden;
      .login-div {
        width: 400px;
        height: calc(100% - 2px);
        margin: 0 calc(calc(100vw - 400px) / 2);
        border: 1px solid var(--el-border-color-light);
        border-radius: 10px;
        h4 {
          text-align: center;
        }
        .el-form {
          margin-right: 10px;
        }
        .sub-btn {
          width: 100%;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped="scoped">
.login {
  .login-box {
    .el-header,
    .el-main,
    .el-footer {
      padding: 0px;
      background-color: white;
    }
  }
}
.imgcontainer {
  width: 100px;
  height: 100px;
  margin: 50px auto;
}
</style>
